<template>
  <div>
    <div style="display: flex; justify-content: space-between; width: 100vw">
      <div style="display: flex">
        <div class="colum_center">
          <h2>本村汽车总数</h2>
          <div>
            <dv-active-ring-chart
              :config="carsNum"
              style="width: 300px; height: 300px"
            />
          </div>
        </div>
        <div class="colum_center">
          <h2>本村监控总数</h2>
          <div>
            <dv-active-ring-chart
              :config="accidentNum"
              style="width: 300px; height: 300px"
            />
          </div>
        </div>
        <div class="colum_center">
          <h2>今日交通事故总数</h2>
          <div>
            <dv-active-ring-chart
              :config="accidentNum2"
              style="width: 300px; height: 300px"
            />
          </div>
        </div>
      </div>
      <dv-border-box-6 style="padding: 20px">
        <div class="colum_center">
          <h2>乡村道路交通拥堵指数</h2>
          <dv-scroll-ranking-board
            :config="jam"
            style="width: 600px; height: 250px"
          />
        </div>
      </dv-border-box-6>

      <div class="colum_center">
        <dv-border-box-12
          style="
            padding: 20px;
            margin-left: 150px;
            width: 350px;
            height: 30vh;
            left: -150px;
          "
        >
          <div class="air" style="width: 400px; height: 320px">
            <h1>今日天气</h1>
            <p>当前天气晴朗，24°C。</p>
            <p>今天日间预计有大雨。 最高气温25°。</p>
          </div>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carsNum: {
        radius: "40%",
        activeRadius: "45%",
        data: [
          {
            name: "莲湖村",
            value: 78,
          },
        ],
        digitalFlopStyle: {
          fontSize: 20,
        },
        showOriginValue: true,
      },
      accidentNum: {
        radius: "40%",
        activeRadius: "45%",
        data: [
          {
            name: "莲湖村",
            value: 130,
          },
        ],
        digitalFlopStyle: {
          fontSize: 20,
        },
        showOriginValue: true,
      },
      accidentNum2: {
        radius: "40%",
        activeRadius: "45%",
        data: [
          {
            name: "莲湖村",
            value: 0,
          },
        ],
        digitalFlopStyle: {
          fontSize: 20,
        },
        showOriginValue: true,
      },
      jam: {
        data: [
          {
            name: "xxx道路",
            value: 35,
          },
          {
            name: "xxx道路",
            value: 68,
          },
          {
            name: "xxx道路",
            value: 30,
          },
          {
            name: "xxx道路",
            value: 55,
          },
          {
            name: "xxx道路",
            value: 40,
          },
          {
            name: "xxx道路",
            value: 30,
          },
          {
            name: "xxx道路",
            value: 33,
          },

          {
            name: "xxx道路",
            value: 28,
          },
          {
            name: "xxx道路",
            value: 120,
          },
          {
            name: "xxx道路",
            value: 78,
          },
          {
            name: "xxx道路",
            value: 66,
          },
          {
            name: "xxx道路",
            value: 80,
          },
          {
            name: "xxx道路",
            value: 45,
          },
          {
            name: "xxx道路",
            value: 60,
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.colum_center {
  display: flex;
  flex-direction: column;
  height: 35vh;
  justify-content: center;
  align-items: center;
}
.air {
  display: flex;
  height: 30vh;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  h1 {
    margin-bottom: 20px;
  }
  p {
    font-size: 1vw;
    line-height: 2.5vw;
  }
}
</style>
